// 渲染器模块
function h(tag, props, children) {
  // vnode（javascript 对象） --> 转为dom
  return {
    tag,
    props,
    children,
  };
}

// 挂载vnode到dom上
function mount(vnode, container) {
  const el = (vnode.el = document.createElement(vnode.tag));

  if (vnode.props) {
    for (const key in vnode.props) {
      if (Object.hasOwnProperty.call(vnode.props, key)) {
        const value = vnode.props[key];
        if (key.startsWith("on")) {
          el.addEventListener(key.slice(2).toLocaleLowerCase(), value);
        } else {
          el.setAttribute(key, value);
        }
      }
    }
  }

  if (vnode.children) {
    if (typeof vnode.children == "string") {
      el.textContent = vnode.children;
    } else {
      // 有子vnode
      vnode.children.forEach((item) => {
        mount(item, el);
      });
    }
  }

  /**
   * 这里添加 node的话会有问题 (如 patch 对比处理不同tag标签时候)
   *  [v1 -- div , v2 , v3 , v4]
   *  [v1 -- p, v5 , v6]
   * 操作 ：删掉v1--div 在尾部加上v1 --p 那么就变成了
   *  [v2 , v3 , v4 , v1 -- p] 就有问题了 
   * 追加dom时候要追加在原来删除dom的位置
   * 
   */
  container.appendChild(el);
}

// 用n2去替代n1
function patch(n1, n2) {
  const oldParentEl = n1.el.parentElement;
  if (n1.tag != n2.tag) {
    oldParentEl.removeChild(n1.el);
    mount(n2, oldParentEl);
    return;
  }

  n2.el = n1.el;

  //   比对props
  if (n2.props) {
    //   处理新加入的props
    for (const newkey in n2.props) {
      if (Object.hasOwnProperty.call(n2.props, newkey)) {
        const newValue = n2.props[newkey];
        if (newkey.startsWith("on")) {
          n1.el.addEventListener(newkey.slice(2).toLocaleLowerCase(), newValue);
        } else {
          n1.el.setAttribute(newkey, newValue);
        }
      }
    }

    // 删除原来的多余的props
    for (const oldKey in n1.props) {
      if (Object.hasOwnProperty.call(n1.props, oldKey)) {
        const oldValue = n1.props[oldKey];
        if (!oldKey in n2.props) {
          if (oldKey.startsWith("on")) {
            n1.el.removeEventListener(oldKey.slice(2).toLocaleLowerCase());
          } else {
            n1.el.removeAttribute(oldKey);
          }
        }
      }
    }
  }

  //   处理children
  if (typeof n2.children === "string") {
    n1.el.innerHTML = n2.children;
  } else {
    //   新的vnode子节点是数组
    if (typeof n1.children === "string") {
      n1.el.innerHTML = "";
      n2.children.forEach((item) => {
        mount(item, n1.el);
      });
    } else {
      // n1.children[v1 , v2 , v3 , v4]
      // n2.children[v1 , v5 , v6]
      const minLength = Math.min(n1.children.length, n2.children.length);
      for (let index = 0; index < minLength; index++) {
        patch(n1.children[index], n2.children[index]);
      }

      //   删除多余的 vnode
      if (n1.children.length > n2.children.length) {
        n1.children.slice(n2.children.length).forEach((item) => {
          n1.el.removeChild(item.el);
        });
      }
      //   添加多出的 vnode
      if (n2.children.length > n1.children.length) {
        n2.children.slice(n1.children.length).forEach((item) => {
          mount(item, n1.el);
        });
      }
    }
  }
}
